<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Author" content="Chist Chen" />
<meta name="Keywords" content="新疆，美丽的地方" />
<meta name="Description" content="新疆是一个美丽的地方，让人神往的地方，每年都会有很多游人来此游玩" />
<link href="DIV+CSS布局实战mix/1.css" type="text/css" rel="stylesheet" />
<title>DIV+CSS布局实战mix</title>
<style>

</style>
	</head>
<body>
  <!--整体外层容器-->
  <div id="container">
  	  <!--banner-->
      <div id="banner">
      	<img src="DIV+CSS布局实战mix/舍得banner.jpg" alt="banner" />		<!--alt的作用是，当图片加载不出来时可以充当图片的文字说明-->
      </div>
      <!--全局导航条-->
      <div id="globllink">
      	<ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">新疆简介</a></li>
          <li><a href="#">风土人情</a></li>
          <li><a href="#">吃在新疆</a></li>
          <li><a href="#">路线选择</a></li>
          <li><a href="#">自助行</a></li>
          <li><a href="#">摄影摄像</a></li>
          <li><a href="#">游记精选</a></li>
          <li><a href="#">资源下载</a></li>
          <li><a href="#">雁过留声</a></li>
        </ul>
      </div>
	  <!--左侧栏-->
      <div id="left">
      	<div id="weather">
          <h3><span>天气查询</span></h3>
		  <ul>
            <li>乌鲁木齐&nbsp;&nbsp;雷阵雨&nbsp;20℃~31℃</li>
            <li>吐鲁番&nbsp;&nbsp;多云转阴&nbsp;20℃~28℃</li>
            <li>喀什&nbsp;&nbsp;阵雨转多云&nbsp;25℃~32℃</li>
            <li>库尔勒&nbsp;&nbsp;阵雨转阴&nbsp;21℃~28℃</li>
            <li>克拉玛依市&nbsp;&nbsp;雷阵雨&nbsp;20℃~30℃</li>
          </ul>        	
        </div>
        <div id="nice">
          <h3><span>今日推荐</span></h3>
       	  <ul>
            <!--
            <li><a href="#"><img src="DIV+CSS布局实战mix/美景1.jpg" /></a></li>
            <li><a><span>美景1</span></a></li>
            -->
           <li><a href="#"><img src="DIV+CSS布局实战mix/美景1.jpg" /><br /><span>美景1</span><a/></li>
           <li><a href="#"><img src="DIV+CSS布局实战mix/美景2.jpg" /><br /><span>美景2</span><a/></li>
           <li><a href="#"><img src="DIV+CSS布局实战mix/美景3.jpg" /><br /><span>美景3</span><a/></li>
          </ul>
        </div>
      </div>
      <!--中间内容栏-->
      <div id="middle">
      	<div id="dog"><a href="#"><img src="DIV+CSS布局实战mix/金毛.jpg" /></a></div>
        <!--
        <img src="DIV+CSS布局实战mix/middle-1.jpg" /><img src="DIV+CSS布局实战mix/漫画1.jpg" /><img src="DIV+CSS布局实战mix/漫画2.jpg" /><img src="DIV+CSS布局实战mix/漫画3.jpg" /><img src="DIV+CSS布局实战mix/漫画4.jpg" />
        应该还是要用列表ul的形式书写，否则无法调整间距-->
        <div id="beauty">	<!-- 最好还是用div进行分块-->
        	<h3><span>美景寻踪</span></h3>
            <ul>
                <li><a href="#"><img src="DIV+CSS布局实战mix/漫画1.jpg" /><a/></li>
                <li><a href="#"><img src="DIV+CSS布局实战mix/漫画2.jpg" /><a/></li>
                <li><a href="#"><img src="DIV+CSS布局实战mix/漫画3.jpg" /><a/></li>
                <li><a href="#"><img src="DIV+CSS布局实战mix/漫画4.jpg" /><a/></li>
            </ul>
        </div>
        <div id="route">
        	<h3><span>线路精选</span></h3>
        	<ul>
            	<li><a href="#">龙岩--厦门--福州</a></li>
                <li><a href="#">厦门--泉州--莆田</a></li>
                <li><a href="#">泉州--莆田--福州</a></li>
                <li><a href="#">福州--莆田--三明</a></li>
            </ul>
        </div>
      </div>    
      <div id="right">
      	<div id="good">
        	<h3><span>魅力风光</span></h3>
            <ul>
            	<li><a href="#"><img src="DIV+CSS布局实战mix/flower-1.jpg" /></a></li>
                <li><a href="#"><img src="DIV+CSS布局实战mix/flower-2.jpg" /></a></li>
            </ul>
        </div>
        <div id="food">
        	<h3>小吃推荐</h3>
            <ul>
            	<li><a href="#">沙茶面</a></li>
                <li><a href="#">馅饼</a></li>
                <li><a href="#">大肠血</a></li>
                <li><a href="#">猪肉干</a></li>
                <li><a href="#">同安封肉</a></li>
            </ul>
        </div>
        <div id="hotel">
        	<h3><span>宾馆酒店</span></h3>
            <ul>
            	<li><a href="#">厦门宾馆</a></li>
                <li><a href="#">京华大酒店</a></li>
                <li><a href="#">丽晶酒店</a></li>
                <li><a href="#">七天酒店</a></li>
                <li><a href="#">青年旅社</a></li>
                <li><a href="#">日日大酒店</a></li>
            </ul>
        </div>
      </div>
      <!--脚注-->
      <div id="footer">
      	<p>陈乾坤&copy;版权所有 <a href="maito:xiaomocqk@163.com">xiaomo@163.com</a></p>
      </div>
  </div>
</body>
</html>